<div class="devui-datepicker-pro-wrapper" dDropDown appendToBody [isOpen]="isOpen" (toggleEvent)="onToggle($event)" [closeScope]="'blank'">
  <div dDropDownToggle class="devui-single-picker devui-input-group devui-dropdown-origin">
    <i class="devui-single-picker-icon">
      <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path
            d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z"
            fill="#BABBC0"
          ></path>
        </g>
      </svg>
    </i>
    <input #dateInput class="devui-input devui-form-control" [placeholder]="placeholder" [(ngModel)]="dateValue" autocomplete="off" />
  </div>

  <div class="devui-datepicker-pro-dropdown-panel" dDropDownMenu>
    <d-tabs [type]="'tabs'" [(activeTab)]="tab1acticeID">
      <d-tab id="1" title="Quick Choose">
        <div style="padding: 8px">
          <d-radio-group [name]="'season'" [values]="values" [(ngModel)]="choose" (change)="valueChange($event)" [direction]="'row'">
          </d-radio-group>
        </div>
      </d-tab>

      <d-tab id="2" title="Absolute Time">
        <d-datepicker-calendar
          #calendar
          [isRangeType]="true"
          [(ngModel)]="curDate"
          [showTime]="true"
          (confirmEvent)="ensureDate()"
          (cancelEvent)="cancel()"
        >
        </d-datepicker-calendar>
      </d-tab>

      <d-tab id="3" title="Relative Time">
        <div style="padding: 8px 16px">
          <span>last:</span>
          <d-input-number style="width: 100px; margin: 0 8px" [(ngModel)]="relativeNumber"></d-input-number>

          <div style="width: 100px; display: inline-block">
            <d-select [appendToBody]="true" [options]="options" [(ngModel)]="relativeUnit"></d-select>
          </div>

          <d-button style="margin-right: 8px; float: right" (click)="ensureRelativeTime()">Ensure</d-button>
        </div>
      </d-tab>
    </d-tabs>
  </div>
</div>
